<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="物流详情"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 物流信息组件 -->
            <div class="logistics-info-box">
                <div class="logistics-info">快递公司：{{logisticsInfo.way}}</div>
                <div class="logistics-info">运单编号：{{logisticsInfo.sn}}</div>
            </div>
            <!-- 物流信息组件 -->

            <!-- 物流详情组件 -->
            <div class="logistics-detail-box">
                <div
                    class="logistics-detail-item"
                    v-for="(item,index) of logisticsInfo.items"
                    :key="index"
                >
                    <img
                        class="item-icon"
                        src="../../assets/images/logistics/logistics-on.png"
                        v-if="index == 0"
                    />
                    <img
                        class="item-icon"
                        src="../../assets/images/logistics/logistics-off.png"
                        v-else
                    />
                    <div class="item-info">
                        <div class="logistics-detail">{{item.info}}</div>
                        <div class="logistics-time">{{item.time}}</div>
                    </div>
                </div>
            </div>
            <!-- 物流详情组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'Logistics',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            logisticsInfo: ''
        }
    },
    mounted() {
        this.getLogisticsInfo()
    },
    methods: {
        getLogisticsInfo() {
            let postData = this.qs.stringify({
                id: this.$route.query.orderId
            })
            this.axios
                .post('/api/orders/ship_logs.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.logisticsInfo = data.data
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        }
    }
}
</script>

<style lang="stylus" scoped>
.logistics-info-box
    padding 0.37rem 0.42rem
    background #fff
    .logistics-info
        font-size 0.33rem
        color #666
        margin-bottom 0.26rem
    .logistics-info:last-child
        margin 0
.logistics-detail-box
    margin-top 0.18rem
    padding-left 0.42rem
    background #fff
    .logistics-detail-item
        display flex
        align-items center
        .item-icon
            width 0.29rem
            height 0.29rem
        .item-info
            flex 1
            min-width 1px
            margin-left 0.26rem
            padding 0.29rem 0.26rem
            border-bottom 1px solid #e5e5e5
            .logistics-detail
                font-size 0.33rem
                color #969696
                line-height 1.5
            .logistics-time
                font-size 0.33rem
                color #969696
                margin-top 0.26rem
</style>

